<template>
  <div id="foot">
    <ul>
        <li @click="light=0">
          <router-link to="/" :class="[{'active':light==0},'ico']"><van-icon name="live" /><br>电影</router-link>
        </li>
        <li @click="light=3">
          <router-link to="/video"  :class="[{'active':light==3},'ico']"><van-icon name="live" /><br>视频</router-link>
        </li>
        <li @click="light=1">
          <router-link to="/svideo"  :class="[{'active':light==1},'ico']"><van-icon name="live" /><br>小视频</router-link>
        </li>
        <li @click="light=2" >
        <router-link to="/my" :class="[{'active':light==2},'ico']"><van-icon name="manager" /><br>我的</router-link>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
        name:'footTab',
        data(){
            return {
                light:0
            }
        }
}
</script>

<style scoped>
  *{
    padding: 0;
    margin: 0;
  }
.active{
    background-color: pink;
    color: white;
}
  #foot ul{
    width: 100%;
    height: 6vh;
    position: fixed;
    z-index: 100;
    bottom: 0;
    background-color: gray;
    display: flex;
    text-align: center;
    line-height: 3vh;
    z-index: 200;
  }
  #foot ul li{
    list-style: none;
    flex: 1;
  }
#foot ul li .ico{
    height: 6vh;
    color: black;
    display: block;
}
</style>